<template>
    <div>
        <div class="header-img">
            <img src="../../../assets/images/header1.jpeg">
        </div>
        <yd-cell-group>
            <yd-cell-item>
                <span slot="left">手机号：</span>
                <yd-input slot="right" type="number" ref="mobile" required regex="mobile" v-model="formItem.mobile"
                          placeholder="请输入手机号"></yd-input>
            </yd-cell-item>

            <yd-cell-item>
                <span slot="left">姓名：</span>
                <yd-input slot="right" max="4" type="text" required v-model="formItem.name"
                          placeholder="请输入姓名"></yd-input>
            </yd-cell-item>

            <yd-cell-item>
                <span slot="left">账号：</span>
                <yd-input slot="right" max="8" type="text" required v-model="formItem.account"
                          placeholder="请输入账号"></yd-input>
            </yd-cell-item>

            <yd-cell-item>
                <span slot="left">密码：</span>
                <yd-input slot="right" max="8" type="password" required v-model="formItem.pwd"
                          placeholder="请输入密码"></yd-input>
            </yd-cell-item>

        </yd-cell-group>
        <div class="wl-button">
            <yd-button size="large" type="primary" class="btn" @click.native="checkForm">账号绑定</yd-button>
        </div>
    </div>
</template>

<script>
import { bindShopUser, getUserInfo } from '@/api/kouzhao'

export default {
  data () {
    return {
      formItem: {
        mobile: '',
        name: '',
        account: '',
        pwd: ''
      }
    }
  },
  methods: {
    run () {
      this.$router.push({
        name: 'shopList',
        params: this.formItem
      })
    },
    checkForm () {
      const v_mobile = this.$refs.mobile
      if (v_mobile.valid !== true) {
        this.$dialog.alert({ mes: '手机号不正确' })
        return false
      }
      this.userCreateOrder()
    },
    userCreateOrder () {
      bindShopUser(this.formItem).then(ret => {
        let result = ret.data
        if (result.errcode === 1001) {
          this.$dialog.confirm({
            title: '绑定成功',
            mes: '点击确定，进行核验',
            opts: () => {
              this.$router.push({
                name: 'checkOrder'
              })
            }
          })
        } else {
          this.$dialog.alert({ mes: result.errmsg })
        }
      })
    }
  },
  mounted () {
    if (!this.$common.xeUtils.isEmpty(this.$route.params)) {
      this.formItem = this.$route.params
    }
    getUserInfo().then(ret => {

    })
  }
}
</script>

<style scoped>
    .wl-button {
        display: flex;
        justify-content: center;
    }

    .wl-button .btn {
        width: 90%;
    }

    .header-img {
        width: 100%;
    }

    .header-img img {
        width: 100%;
    }
</style>
